<template>
    <view>
        <!-- 第一行 -->
        <view class="function-input1" v-if="isShow1">
            <view class="function-input1-checkbox-box">

                <checkbox v-if="isShowcheckbox1"    selectedColor="#3399FF" class="function-input1-checkbox"
                    :checked="checkboxvalue1" @tap="checkboxchange1('checkboxvalue1')" />

            </view>
            <text class="function-input1-text"> {{ title1 }}</text>

            <uni-easyinput errorMessage v-model="input1" focus :styles="{
                'font-size': '20px',
                'height': '40px',
            }"></uni-easyinput>
            <view class="function-input1-buttonview">
                <button v-if="isShowbutton1" @click="open('仓库', input1, 'input1')"
                    class="function-input1-button  function-input1-button1">{{ buttontext1 }}</button>

            </view>

        </view>
        <!-- 第二行 -->
        <view class="function-input1" v-if="isShow2">
            <view class="function-input1-checkbox-box">

                <checkbox v-if="isShowcheckbox2"    selectedColor="#3399FF" class="function-input1-checkbox"
                    :checked="checkboxvalue2" @tap="checkboxchange1('checkboxvalue2')" />

            </view>
            <text class="function-input1-text"> {{ title2 }}</text>

            <uni-easyinput errorMessage v-model="input2" focus :styles="{
                'font-size': '20px',
                'height': '40px',
            }"></uni-easyinput>
            <view class="function-input1-buttonview">
                <button v-if="isShowbutton2" @click="open('仓位', input2, 'input2')"
                    class="function-input1-button  function-input1-button1">{{ buttontext2 }}</button>
            </view>
        </view>
        <!-- 第三行 -->
        <view class="function-input1" v-if="isShow3">
            <view class="function-input1-checkbox-box">

                <checkbox v-if="isShowcheckbox3"    selectedColor="#3399FF" class="function-input1-checkbox"
                    :checked="checkboxvalue3" @tap="checkboxchange1('checkboxvalue3')" />

            </view>
            <text class="function-input1-text"> {{ title3 }}</text>

            <uni-easyinput errorMessage v-model="input3" focus :styles="{
                'font-size': '20px',
                'height': '40px',
            }"></uni-easyinput>
            <view class="function-input1-buttonview">
                <button v-if="isShowbutton3"
                  @click="opeMaterialInquiry"  class="function-input1-button  function-input1-button1">{{ buttontext3 }}</button>
            </view>
        </view>
        <!-- 第四行 -->
        <view class="function-input1" v-if="isShow4">
            <view class="function-input1-checkbox-box">

                <checkbox v-if="isShowcheckbox4"    selectedColor="#3399FF" class="function-input1-checkbox"
                    :checked="checkboxvalue4" @tap="checkboxchange1('checkboxvalue4')" />
            </view>
            <text class="function-input1-text"> {{ title4 }}</text>

            <uni-easyinput errorMessage v-model="input4" focus :styles="{
                'font-size': '20px',
                'height': '40px',
            }"></uni-easyinput>
            <view class="function-input1-buttonview">
                <button v-if="isShowbutton4"
                    class="function-input1-button  function-input1-button1">{{ buttontext4 }}</button>
            </view>
        </view>
    </view>
    <!-- 弹出查询页面 -->
    <view>
        <uni-popup ref="popup" background-color="#fff" @touchstart.native.passive destroy-on-close="false">
            <view class="popup-content">
                <HouseSelect :propsselecttitle="selecttitle" @propspuop="propspuop" :propsinput="popupinput"
                    v-model:code="currentCode"
                
                >
                </HouseSelect>



            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { ref,watch } from "vue"
//引入仓库查询
import HouseSelect from '@/components/HouseSelect.vue'

//接收父组件传递过来的参数
const props = defineProps({

    isShow1: {
        type: Boolean,
        default: false
    },
    isShowcheckbox1: {
        type: Boolean,
        default: false
    },
    checkboxvalue1: {
        type: Boolean,
        default: false
    },
    title1: {
        type: String,
        default: '仓库'
    },
    input1: {
        type: String,
        default: ''
    },


    isShow2: {
        type: Boolean,
        default: false
    },
    isShowcheckbox2: {
        type: Boolean,
        default: false
    },
    checkboxvalue2: {
        type: Boolean,
        default: false
    },
    title2: {
        type: String,
        default: '仓位'
    },
    input2: {
        type: String,
        default: ''
    },



    isShow3: {
        type: Boolean,
        default: false
    },
    isShowcheckbox3: {
        type: Boolean,
        default: false
    },
    checkboxvalue3: {
        type: Boolean,
        default: false
    },
    title3: {
        type: String,
        default: '物料'
    },
    input3: {
        type: String,
        default: ''
    },

    isShow4: {
        type: Boolean,
        default: false
    },
    isShowcheckbox4: {
        type: Boolean,
        default: false
    },
    checkboxvalue4: {
        type: Boolean,
        default: false
    },
    title4: {
        type: String,
        default: '物料'
    },
    input4: {
        type: String,
        default: ''
    },


})
//返回给父组件的事件
const emit = defineEmits([
    'update:checkboxvalue1','update:input1',
    'update:checkboxvalue2','update:input2',
    'update:checkboxvalue3','update:input3',
    'update:checkboxvalue4','update:input4'

])


// 第一行
let isShow1 = ref<boolean>(props.isShow1)//第一行是否显示
let isShowcheckbox1 = ref<boolean>(props.isShowcheckbox1)//第一行是否显示复选框
let checkboxvalue1 = ref<boolean>(props.checkboxvalue1)//第一行复选框是否选中
let title1 = ref<string>(props.title1)//第一行标题
let input1 = ref<string>(props.input1)//第一行输入框内容
let isShowbutton1 = ref<boolean>(true)//第一行是否显示按钮
let buttontext1 = ref<string>("...")//第一行按钮文字

// 第二行
let isShow2 = ref<boolean>(props.isShow2)//第二行是否显示
let isShowcheckbox2 = ref<boolean>(props.isShowcheckbox2)//第二行是否显示复选框
let checkboxvalue2 = ref<boolean>(props.checkboxvalue2)//第二行复选框是否选中
let title2 = ref<string>(props.title2)//第二行标题
let input2 = ref<string>(props.input2)//第二行输入框内容
let isShowbutton2 = ref<boolean>(true)//第二行是否显示按钮
let buttontext2 = ref<string>("...")//第二行按钮文字

// 第三行
let isShow3 = ref<boolean>(props.isShow3)//第三行是否显示
let isShowcheckbox3 = ref<boolean>(props.isShowcheckbox3)//第三行是否显示复选框
let checkboxvalue3 = ref<boolean>(props.checkboxvalue3)//第三行复选框是否选中
let title3 = ref<string>(props.title3)//第三行标题
let input3 = ref<string>(props.input3)//第三行输入框内容
let isShowbutton3 = ref<boolean>(true)//第三行是否显示按钮  
let buttontext3 = ref<string>("库存")//第三行按钮文字

// 第四行
let isShow4 = ref<boolean>(props.isShow4)//第四行是否显示
let isShowcheckbox4 = ref<boolean>(props.isShowcheckbox4)//第四行是否显示复选框
let checkboxvalue4 = ref<boolean>(props.checkboxvalue4)//第四行复选框是否选中  
let title4 = ref<string>(props.title4)//第四行标题
let input4 = ref<string>(props.input4)//第四行输入框内容
let isShowbutton4 = ref<boolean>(false)//第四行是否显示按钮
let buttontext4 = ref<string>("...")//第四行按钮文字

// 选择传给查询页面的标题
let selecttitle = ref<string>("")
// 传入的输入框
let popupinput = ref<string>("")
//定义一个返回传入的输入框的变量名
let inputrefname = ref<string>("")
// 当前选中的代码和名称
let currentCode = ref<string>("");
// 弹出查询页面
let popup = ref<boolean>(false);
const open = (title: string, input: string, inputname: string) => {

    popupinput.value = input
    inputrefname.value = inputname


    selecttitle.value = title;

    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
    (popup.value as any).open("bottom")

};
// 接收子组件返回的事件
const propspuop = (data: any) => {
    console.log(data);
    if (!data.popup) {
        (popup.value as any).close()
    }
    // 创建输入框映射对象，用于根据变量名动态访问输入框
    const inputMap = {
        input1,
        input2,
        input3,
        input4
    };
    // 动态更新输入框值
    if (data.code && inputrefname.value) {
        const targetInput = inputMap[inputrefname.value as keyof typeof inputMap];
        if (targetInput) {
            targetInput.value = data.code;
            console.log(`已更新${inputrefname.value}的值为: ${data.code}`);
        } else {
            console.error(`未找到名为${inputrefname.value}的输入框`);
        }
    }

}


const opeMaterialInquiry = () => {
    uni.navigateTo({
        url: '/pages/index/MaterialInquiry',
    })
}

// 复选框改变事件
const checkboxchange1 = (name:string) => {
    if(name == 'checkboxvalue1'){
        checkboxvalue1.value = !checkboxvalue1.value
    }
    if(name == 'checkboxvalue2'){
        checkboxvalue2.value = !checkboxvalue2.value
    }
    if(name == 'checkboxvalue3'){
        checkboxvalue3.value = !checkboxvalue3.value
    }
    if(name == 'checkboxvalue4'){
        checkboxvalue4.value = !checkboxvalue4.value
    }



    
}

// //监听input1变化
watch(input1, (newValue) => {
    console.log(newValue);
    emit('update:input1', newValue)
})
// 监听checkboxvalue1变化
watch(checkboxvalue1, (newValue) => {
    console.log(newValue);
    emit('update:checkboxvalue1', newValue)
})



// 监听input2变化
watch(input2, (newValue) => {
    console.log(newValue);
    emit('update:input2', newValue)
})
// 监听checkboxvalue2变化
watch(checkboxvalue2, (newValue) => {
    console.log(newValue);
    emit('update:checkboxvalue2', newValue)
})
// 监听input3变化
watch(input3, (newValue) => {
    console.log(newValue);
    emit('update:input3', newValue)
})
// 监听checkboxvalue3变化
watch(checkboxvalue3, (newValue) => {
    console.log(newValue);
    emit('update:checkboxvalue3', newValue)
})

// 监听input4变化
watch(input4, (newValue) => {
    console.log(newValue);
    emit('update:input4', newValue)
})
// 监听checkboxvalue4变化
watch(checkboxvalue4, (newValue) => {
    console.log(newValue);
    emit('update:checkboxvalue4', newValue)
})


</script>

<style scoped>
.selectpoput-view {
    width: 100%;
    height: 100%;
}

.function-input1 {
    padding: 2px 10px;
    display: flex;
    height: 45px;
}



.function-input1-checkbox {
    transform: scale(1.2);
    margin: 7px;

}

.function-input1-checkbox-box {
    height: 50px;
    width: 43px;
}

.function-input1-text {
    font-size: 20px;
    color: #333;
    margin-top: 5px;
    margin-right: 15px;
}

.function-input1-buttonview {
    width: 60px;
    height: 40px;
    margin-left: 10px;

}

.function-input1-button {
    width: 60px;
    height: 40px;
    background-color: #F7F3F1;
    border-radius: 10px;
    background-color: dodgerblue;
    line-height: 30px;
    color: #FFFFFF;
}

.function-input1-button1 {
    font-size: 16px;
    line-height: 38px;
}
</style>